<template>
    <view class="example">
		<view class="item" v-for="item in urls" :key="item.name" hover-class="hover-class">
            <navigator :url="item.url">{{item.name}}</navigator>
		</view>
	</view>
</template>


<script setup>
import {ref} from "vue";

const urls = ref([
	{name: "0.UserInfo", url: "/pages/demo/demo"},
	{name: "1.xxm-layout", url: "/pages/demo1/demo1"},
	{name: "2.xxm-layout", url: "/pages/demo2/demo2"},
	{name: "3.给子组件传递方法", url: "/pages/demo3/demo3"},
	{name: "4.组件卸载", url: "/pages/demo4/demo4"},
	{name: "5.调用子组件的方法", url: "/pages/demo5/demo5"},
	{name: "6.生命周期", url: "/pages/demo6/demo6"},
	{name: "7.scss参数", url: "/pages/demo7/demo7"},
])

</script>


<style lang="scss">
 .hover-class{
    border: 1px solid rgb(11, 176, 231);
	background: rgb(11, 176, 231);
	color: #fff;
 }

 .example{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: rgb(11, 176, 231);

	.item{
		margin: 5px 0;
		padding: 5px 15px; 
		border: 1px solid lightgray;
		border-radius: 10px; 
	}

 }
</style>
